<template>
	<view>
		<!-- 加了fixed -->
		<view class="page_header">
			<view class="status-bar"></view>
			<view class="navtop">
				<image @click="back" src="/static/index/Back_icon.png" mode="widthFix" class="back_icon"></image>
				<text class="balance">线上订单</text>
				<!-- 右边自定义图片 -->
				
				<!-- <view class="more" v-show="downIcon" @click="sort" v-if="n==5||n==4">编辑</view>
				<view class="more" v-show="!downIcon" @click="sort" v-if="n==5||n==4">完成</view> -->
			</view>
		</view>
		<!-- 没加fixed -->
		<view class="status-bar"></view>
		<view class="" style="height:  100rpx ;">
		</view>
		<view class="online_top">
			<view class="online_top_box" v-for="(item,index) in text" :key="index" :class="{checked1:index==n}" @click="dianji(item,index)">
				{{item.title}}
			</view>
		</view>
		
		<view class="list_box" v-for="(item,index) in list" :key="index">
			
			<view class="list_box_top">
				<view class="list_box_top_left">
					<image src="/static/index/index24.png" mode=""></image>
					<text>{{item.name}}</text>
				</view>
				<view class="list_box_top_right" v-if="n==4">
					退款成功
				</view>
				<view class="list_box_top_right" v-if="n==0">
					待支付
				</view>
				<view class="list_box_top_right" v-if="n==1">
					待发货
				</view>
				<view class="list_box_top_right" v-if="n==2">
					待收货
				</view>
				<view class="list_box_top_right" v-if="n==3">
					待评价
				</view>
				<view class="list_box_top_right" v-if="n==5">
					订单完成 
				</view>
				<image v-if="!picstyle" src="/static/prodtct/cha.png" mode="" style="width: 30rpx;height: 30rpx;"></image>
			</view>
			<view class="list_box_center">
				<image :src="item.img" mode=""></image>
				<view class="list_box_center_right">
					<view class="list_box_center_top">
						<view class="list_box_center_top_left diandiandian">
							{{item.title}}
						</view>
						<view class="list_box_center_top_right">
							x{{item.number}}
						</view>
					</view>
					
					<view class="list_box_center_right_bottom">
						<view class="list_box_center_right_bottom_price">
							￥{{item.price}}
						</view>
						<view class="" style="display: flex;"  v-if="n==4">
							<view class="list_box_center_right_bottom_capzuo" >
								再来一单
							</view>
							<view class="list_box_center_right_bottom_capzuo" >
								退款进度
							</view>
						</view>
						<view class="list_box_center_right_bottom_capzuo" v-if="n==5">
							再来一单
						</view>
						<view class="list_box_center_right_bottom_capzuo1" v-if="n==1">
							等待商家送货
						</view>
						<view class="" style="display: flex;"  v-if="n==2">
							<view class="list_box_center_right_bottom_capzuo" >
								查看物流
							</view>
							<view class="list_box_center_right_bottom_capzuo" >
								确认收货
							</view>
						</view>
						<view class="" style="display: flex;"  v-if="n==0">
							<view class="list_box_center_right_bottom_capzuo" >
								联系商家
							</view>
							<view class="list_box_center_right_bottom_capzuo" >
								立即支付
							</view>
						</view>
						<view class="" style="display: flex;"  v-if="n==3">
							<view class="list_box_center_right_bottom_capzuo" >
								查看物流
							</view>
							<view class="list_box_center_right_bottom_capzuo" @click="gopingjia" >
								立即评价
							</view>
						</view>
						
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// downIcon: true,
				picstyle:true,
				n:0,
				text:[
					{
						title:'全部',
						id:"1"
					},
					{
						title:'未支付',
						id:"1"
					},
					{
						title:'未发货',
						id:"1"
					},
					{
						title:'未收货',
						id:"1"
					},
					{
						title:'售后',
						id:"1"
					},
					{
						title:'待评价',
						id:"1"
					}
				],
				list:[
					{
						 img:'http://t8.baidu.com/it/u=1484500186,1503043093&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1590043349&t=ab2af331e765a97e44b4aee44524ce0b',
						 title:'Gucci印花兜帽卫衣',
						 price:'108.84',
						 number:'1',
						 name:"商家信息"
					},
					{
						 img:'http://t8.baidu.com/it/u=1484500186,1503043093&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1590043349&t=ab2af331e765a97e44b4aee44524ce0b',
						 title:'Gucci印花兜帽卫衣',
						 price:'108.84',
						 number:'1'
					},
					{
						 img:'http://t8.baidu.com/it/u=1484500186,1503043093&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1590043349&t=ab2af331e765a97e44b4aee44524ce0b',
						 title:'Gucci印花兜帽卫衣',
						 price:'108.84',
						 number:'1'
					},
					{
						 img:'http://t8.baidu.com/it/u=1484500186,1503043093&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1590043349&t=ab2af331e765a97e44b4aee44524ce0b',
						 title:'Gucci印花兜帽卫衣',
						 price:'108.84',
						 number:'1'
					},
					{
						 img:'http://t8.baidu.com/it/u=1484500186,1503043093&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1590043349&t=ab2af331e765a97e44b4aee44524ce0b',
						 title:'Gucci印花兜帽卫衣',
						 price:'108.84',
						 number:'1'
					},
					{
						 img:'http://t8.baidu.com/it/u=1484500186,1503043093&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1590043349&t=ab2af331e765a97e44b4aee44524ce0b',
						 title:'Gucci印花兜帽卫衣',
						 price:'108.84',
						 number:'1'
					}
				]
				
			}
		},
		onLoad(option) {
			var self=this
			self.n=option.index
			console.log(option)
			
		},
		methods: {
			gopingjia(){
				uni.navigateTo({
					url:"comment"
				})
			},
			    // sort() {
			    //       this.downIcon = !this.downIcon
					  // console.log(this.downIcon)
					  // if(this.downIcon==false){
						 //  this.picstyle=false
					  // }else{
						 //  this.picstyle=true
					  // }
			    //     },
			back(){
				uni.navigateBack({
					
				})
			},
			gotaskone(){
				
			},
			dianji(item,index){
				this.n=index
				// this.downIcon=true
				// this.picstyle=true
			},
		}
	}
</script>

<style lang="less">
	.checked1{
		font-weight: bold !important;
		 border-bottom:6rpx solid  #7322D8;
		 box-sizing: border-box;
		 border-radius:3rpx;
	}
	page{
		background-color: #EFEFF4;
		box-sizing: border-box;
	}
.more {
   	position: absolute;
   	right: 67rpx;
	   font-size: 32rpx;
	   background: linear-gradient(45deg, rgba(212, 32, 238, 1) 0%, rgba(115, 34, 216, 1) 100%);
	   -webkit-background-clip: text;
	   color: transparent;
   }
   .online_top{
	   width: 750rpx;
	   height: 84rpx;
	   margin-bottom: 30rpx;
	   background-color: white;
	   border-top: 1rpx solid #EFEFF4;
	   display: flex;
	   justify-content: space-between;
	   padding: 0 36rpx;
	   align-items: center;
	   box-sizing: border-box;
	   font-size: 30rpx;
	   font-family:PingFang SC;
	   font-weight:400;
	   color:rgba(51,51,51,1);
	   .online_top_box{
		   height: 100%;
		   line-height: 84rpx;
	   }
   }
   .list_box{
	   width:680rpx;
	   height:234rpx;
	   background:rgba(255,255,255,1);
	   border-radius:20rpx;
	   margin: 0 auto 20rpx auto;
	   padding:0 30rpx 20rpx 30rpx ;
	   box-sizing: border-box;
	   .list_box_top{
		   height: 60rpx;
		   display: flex;
		   justify-content: space-between; 
		   border-bottom: 1rpx solid #E5E5E5;
		   align-items: center;
		   margin-bottom: 22rpx;
		   .list_box_top_left{
			   display: flex;
			   align-items: center;
			   width: 400rpx;
			   image{
				   width:32rpx;
				   height:29rpx;
				   margin-right: 13rpx;
			   }
			   text{
				   font-size:30rpx;
				   font-family:PingFang SC;
				   font-weight:400;
				   color:rgba(51,51,51,1);
			   }
		   }
		   .list_box_top_right{
			   font-size: 28rpx;
			   font-family:PingFang SC;
			   font-weight:400;
			   color:rgba(115,34,216,1);
		   }
	   }
	   .list_box_center{
		   height: 126rpx;
		   display: flex;
		   image{
			   width:120rpx;
			   height:120rpx;
			   border-radius:8rpx;
			   margin-right: 26rpx;
		   }
	   }
   }
   .list_box_center_right{
	   width: 475rpx;
	   display: flex;
	   flex-direction: column;
	   justify-content: space-between;
	   .list_box_center_top{
		   display: flex;
		   justify-content: space-between;
		   .list_box_center_top_left{
			   width:227px;
			   height:25px;
			   font-size:30rpx;
			   font-family:PingFang SC;
			   font-weight:400;
			   color:rgba(51,51,51,1);
		   }
		   .list_box_center_top_right{
			   font-size:30rpx;
			   font-family:PingFang SC;
			   font-weight:400;
			   color:rgba(142,142,142,1);
		   }
	   }
	   .list_box_center_right_bottom{
		   display: flex;
		   justify-content: space-between;
		   .list_box_center_right_bottom_price{
			   font-size:32rpx;
			   font-family:FZHei-B01S;
			   font-weight:400;
			   color:rgba(255,5rrr9,48,1);
		   }
		   .list_box_center_right_bottom_capzuo{
			   border:1rpx solid rgba(115,34,216,1);
			   border-radius:24rpx;
			   color: #7322D8;
			   font-size: 24rpx;
			   padding-left: 16rpx;
			   padding-right: 16rpx;
			   box-sizing: border-box;
			   padding-top: 6rpx;
			   padding-bottom:6rpx;
			   margin-top: 6rpx;
			   margin-left: 10rpx;
		   }
		   .list_box_center_right_bottom_capzuo1{
			   border-radius:24rpx;
			   color: #7322D8;
			   font-size: 24rpx;
			   box-sizing: border-box;
			   margin-top: 6rpx;
		   }
	   }
   }
</style>
